<template>
  <div class="project">
    <div class="project-search">
      <el-form class="search-form" ref="formRef" label-suffix=" :" :model="productModelParams" @submit.prevent>
        <div class="search-list">
          <!-- <el-form-item label="类型">
            <el-select v-model="productModelParams.typeId" placeholder="请选择" clearable filterable>
              <el-option v-for="item in viewUserList" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="名称">
            <el-input v-model="productModelParams.name" placeholder="请填写"></el-input>
          </el-form-item>
          <!-- <el-form-item label="参数">
            <el-select v-model="productModelParams.typeId" placeholder="请选择" clearable filterable>
              <el-option v-for="item in viewUserList" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item> -->
        </div>
        <div class="operation">
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="search" native-type="submit"> 搜索 </el-button>
            <el-button :icon="Refresh" @click="reset(formRef)"> 重置 </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="project-content">
      <div class="content-top">
        <el-button v-auth="'add'" type="primary" :icon="Plus" @click="add"> 新增车型 </el-button>
        <el-button :icon="Refresh" circle @click="refresh" />
      </div>
      <el-scrollbar>
        <div class="cot-list-wrap">
          <ul ref="listWrapRef" class="cot-list" :style="`--gap: ${gap}px ${gap}px`">
            <li class="list-item" v-for="(item, index) in productModel" :key="index" @click="jumpDetail(item.id)">
              <div class="img">
                <img :src="urlResource + item.picture" />
              </div>
              <p>
                <span class="sle" :title="item.name">{{ item.name }}</span>
                <span>{{ getDictItem("productId", item.typeId) }}</span>
              </p>
              <div @click.stop class="position">
                <el-dropdown trigger="click" v-auth="{ not: ['update', 'delete', 'export'] }">
                  <span class="el-dropdown-link">
                    <div class="tit-right">...</div>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-if="BUTTONS.update" @click="handleEdit(item)"> 编辑 </el-dropdown-item>
                      <el-dropdown-item v-if="BUTTONS.delete" @click="handleDelete(item)">删除</el-dropdown-item>
                      <el-dropdown-item v-if="BUTTONS.export">导出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </li>
          </ul>
          <el-empty :image-size="200" v-if="!productModel.length" description="暂无项目" />
        </div>
      </el-scrollbar>
    </div>
    <CarDrawer v-if="drawerVisible" v-model:drawerVisible="drawerVisible" :params-car="paramsCar" @refresh="refresh" />
    <Detail v-if="drawerVisibleDetail" v-model:drawerVisibleDetail="drawerVisibleDetail" :id="itemId" />
  </div>
</template>
<script lang="ts" setup>
import { Search, Plus, Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import CarDrawer from "./CarDrawer.vue";
import Detail from "./Detail.vue";
import { Project } from "@/api/interface/project";
import { getProductModelPage, delProductModelDelete } from "@/api/modules/carType"; // addProductModelAdd, updateProductModelUpdate, delProductModelDelete
import { getListAllUser } from "@/api/modules/sys";
import type { FormInstance } from "element-plus";
import { useDict } from "@/hooks/useDict";
/**hook */
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthButtons } from "@/hooks/useAuthButtons";
/**变量 */
const { BUTTONS } = useAuthButtons();
const { getDictItem } = useDict(["productId"]);
const urlResource = window?.staticConfig.urlResource;
const formRef = ref<FormInstance>();
const listWrapRef = ref();
let drawerVisible = ref(false);
let drawerVisibleDetail = ref(false);
const paramsCar = ref({
  uiType: 1, // 1: 添加 2: 编辑
  id: ""
});

let gap = ref(15);
let productModelParams = ref({
  currentPage: 1,
  pageSize: 1000,
  typeId: "",
  name: ""
});
let productModel: Project.ResProjectData = ref([]);
const viewUserList = ref([]);
const itemId = ref("");
// computed

/** 方法 */
const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  productModelParams.value.name = "";
  // productModelParams.value.searchKey = "";
  refresh();
};
const search = function () {
  getProductModelPageFn();
};
const jumpDetail = (id: string) => {
  drawerVisibleDetail.value = true;
  itemId.value = id;
};
// const objResizeObserver = new ResizeObserver(function (entries) {
//   const entry = entries[0];
//   const cr = entry.contentRect;
//   const num = Math.floor(cr.width / 240);
//   gap.value = (cr.width - num * 240) / (num - 1);
// });
const add = () => {
  drawerVisible.value = true;
  paramsCar.value.uiType = 1;
  paramsCar.value.id = "";
};
const handleEdit = item => {
  drawerVisible.value = true;
  paramsCar.value.uiType = 2;
  paramsCar.value.id = item.id;
};
const handleDelete = async item => {
  await useHandleData(delProductModelDelete, { id: item.id }, `删除【${item.name}】`);
  getProductModelPageFn();
};
const getProductModelPageFn = async () => {
  try {
    const { data } = await getProductModelPage(productModelParams.value);
    productModel.value = data.records || [];
  } catch (error) {
    console.log(error);
  }
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  viewUserList.value = data;
};
const refresh = () => {
  getProductModelPageFn();
};
onBeforeUnmount(() => {
  // objResizeObserver.unobserve(listWrapRef.value);
});
onMounted(() => {
  // 观察文本域元素
  // objResizeObserver.observe(listWrapRef.value);
  getProductModelPageFn();
  getListAllUserFn();
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
